<template>
    <div class="container">

        <div>
            <head-bar height="80" leftText="取消" rightText="发布" :rightClick="submitForm"
                      :leftClick="returnPage"></head-bar>
        </div>
        <div class="follow-content">
            <div class="content-label">
            </div>
            <div v-if="param.type == 'recorde'" class="record-content">
                <audio-vue v-if="isAudioShow" :time="voiceTime"
                           :audioSrc="path"></audio-vue>
            </div>
            <textarea v-if="param.type != 'recorde'" placeholder="分享新鲜事" @input="getContentVal" class="content"
                      rows="20"></textarea>
            <waterfall v-if="param.type == 'camera'" class="image-area" :style="_autoHeightStyle" column-width="150"
                       column-count="auto" left-gap="20" column-gap="5">
                <cell v-for="(img,index) in imgs">
                    <div class="image-panel">
                        <image @click="openSlide(index)" class="image-i" :src="img.thumbUrl"></image>
                    </div>
                    <wxc-icon @wxcIconClicked="deleImg(index)" class="del-image" name="close"
                              :icon-style="{color:'#ff8c71',fontSize:30}"></wxc-icon>
                </cell>
                <cell>
                    <div @click="openCamera" class="image-i"
                         style="border-width: 1px;border-color: #dddddd;justify-content: center;align-items: center;margin-top: 20px;">
                        <wxc-icon name="add" :icon-style="{color:'#dddddd',fontSize:35}"></wxc-icon>
                    </div>
                </cell>
            </waterfall>
        </div>

        <cell-select label="*" :selectData="typeData" :has-top-border="true" @getVal="getContentTypeVal"
                     title="问题类型"></cell-select>

        <wxc-lightbox
                ref="wxc-lightbox"
                height="800"
                :show="showSlide"
                :image-list="imageList"
                :index="slideIndex"
                @wxcLightboxOverlayClicked="wxcLightboxOverlayClicked">
        </wxc-lightbox>
        <record-vue v-if="param.type == 'recorde'" @recordCallBack="reCallback"></record-vue>
    </div>
</template>


<style>
    .container {
        flex-direction: column;
        background-color: #F6F6F6;
    }

    .icon {
        width: 50px;
        height: 50px;
    }

    .content-type-photo {

    }

    .content-type-camera {

    }

    .content-type-panel {
        width: 750px;
        height: 75px;
        background-color: white;
        justify-content: center;
        align-items: center;
    }

    .border-right-line {
        border-right-color: #e2e2e2;
        border-right-width: 1px;
    }

    .content-type-area {
        flex-direction: row;
        width: 750px;
        height: 75px;
        border-top-color: #e2e2e2;
        border-top-width: 1px;
        padding-left: 20px;
    }

    .content {
        width: 750px;
        height: 400px;
        padding-left: 20px;
    }

    .follow-content {
        background-color: white;
        padding-top: 36px;
    }

    .record-content {
        background-color: white;
        width: 750px;
        height: 150px;
    }

    .content-label {
        flex-direction: row;
        padding-left: 15px;
        width: 750px;
    }

    .content-label-tag {
        font-size: 32px;
        color: #ff5d54;
    }

    .content-label-t {
        font-size: 32px;
        color: #272727;
    }

    .image-area {
        justify-content: flex-start;
    }

    .image-panel {
        width: 150px;
        height: 150px;
        border-width: 1px;
        border-color: #d1d1d1;
        margin-bottom: 20px;
        margin-top: 20px;
    }

    .image-i {
        width: 150px;
        height: 150px;
    }

    .del-image {
        position: absolute;
        background-color: white;
        border-radius: 50px;
        left: 120;
        top: 0;
        width: 50px;
        height: 50px;
        /*text-align: center;*/
        padding-left: 10px;
        padding-top: 10px;
        box-shadow: focus 1px 1px rgb(181, 181, 181);
    }

    .submit-area {
        margin-top: 10px;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        width: 750px;
        height: 90px;
        background-color: #01A65A;
    }

    .submit-btn {
        font-size: 30px;
        color: white;
    }


</style>
<style>

    .time-div {
        height: 100px;
        width: 750px;
    }

    .container {
        flex-direction: column-reverse;

    }

    .content {
        padding-left: 15px;
        padding-right: 15px;
    }


</style>

<script>
    import {WxcLightbox, WxcIcon} from 'weex-ui'
    import headBar from '../components/headBar.vue'
    import nw from '../network/nw.js'
    import stl from '../utils/stringUtils.js'
    import cellSelect from '../components/cellSelect.vue'
    import recordVue from "../components/recordVue.vue";
    import audioVue from "../components/audioVue.vue";


    const nav = weex.requireModule('navigator')

    export default {
        components: {audioVue, recordVue, headBar, WxcLightbox, WxcIcon, cellSelect},
        data: () => ({
            imgs: [],
            imageList: [],
            showSlide: false,//是否显示幻灯片
            slideIndex: 0,//是否显示幻灯片
            typeData: 0,//下拉类型数据
            form: {
                contentText: ''
            },
            param: {},//跳转页面传递参数
            voiceTime: 0,
            path: "",
            isAudioShow: false,

        }),
        computed: {
            _autoHeightStyle: function () {

                if (this.imgs.length == 0) {
                    return {height: 200}
                } else {

                    var index = parseInt((this.imgs.length + 1) / 4)

                    var remain = (this.imgs.length + 1) % 4

                    if (remain > 0) {
                        index += 1
                    }

                    return {height: index * 200}
                }

            }
        },
        methods: {
            //返回上个页面
            returnPage() {
                nav.back()
            },
            //关闭幻灯片
            wxcLightboxOverlayClicked() {
                this.showSlide = false
            },
            reCallback(path, time) {
                var self = this
                this.voiceTime = time
                nw.postFile(path.path, {
                    success(res) {
                        for(let i in res){
                            var ele = res[i]
                            self.path = ele.url
                            self.form.contentFileKey = ele.key
                        }

                        self.isAudioShow = true
                    }
                })

            },
            //打开相机
            openCamera() {
                var self = this

                const photo = weex.requireModule('photo')
                photo.open(500, 800, '#01A65A', '#ffffff', '#ffffff', function (e) {
                    nw.postFile(e.path,{
                        success(res){
                            var modal = weex.requireModule('modal')
                            modal.alert({message: e.path})
//                            modal.toast({message:JSON.stringify(res)})
                            for(let i in res){
                                var ele = res[i]
                                self.imgs.push(ele)
                                self.imageList.push({
                                    src:ele.url
                                })
                            }
                        }
                    })
                })
            },
            //打开相册
            openPhoto() {
                var self = this;
                const photo = weex.requireModule('photo');
                photo.openPhoto(500, 800, '#01A65A', '#ffffff', 'red', function (e) {
                    nw.postFile(e.path, {
                        success(res) {
                            for (let i in res) {
                                var ele = res[i]
                                self.imgs.push(ele)
                                self.imageList.push({
                                    src: ele.url
                                })
                            }
                        }
                    })
                })
            },

            //打开幻灯片
            openSlide(index) {
                this.slideIndex = index
                this.showSlide = true
            },

            //删除图片
            deleImg(index) {
                this.imgs.splice(index, 1)
            },

            getContentTypeVal(data) {
                this.form.classifyId = data[0]
            },
            //文本内容
            getContentVal(e) {
                var val = e.value
                this.form.contentText = encodeURIComponent(val)
                var regStr = /[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF][\u200D|\uFE0F]|[\uD83C|\uD83D|\uD83E][\uDC00-\uDFFF]|[0-9|*|#]\uFE0F\u20E3|[0-9|#]\u20E3|[\u203C-\u3299]\uFE0F\u200D|[\u203C-\u3299]\uFE0F|[\u2122-\u2B55]|\u303D|[\A9|\AE]\u3030|\uA9|\uAE|\u3030/ig;
                this.form.orgContent = val.replace(regStr, ' ')
            },

            //提交表单
            submitForm() {
                var modal = weex.requireModule('modal')
                var f = this.form


                if (f.contentType == 1200) {
                    if (stl.isEmpty(f.contentText)) {
                        return modal.toast({message: '内容不能为空'})
                    }
                }

                if (f.contentType == 1300 && this.imgs.length == 0) {
                    return modal.toast({message: '图片不能为空'})
                }

                if (f.contentType == 1100 && !f.contentFileKey) {
                    return modal.toast({message: '语音不能为空'})
                }

                if (f.contentType == 1300) {
                    var keys = ''
                    for (let t in this.imgs) {
                        var tele = this.imgs[t]
                        keys += ',' + tele.key
                    }
                    if (keys) {
                        f.contentFileKey = keys.substring(1)
                    }
                }


                if (stl.isUndefinedNull(f.classifyId)) {
                    return modal.toast({message: '问题类型不能为空'})
                }

                nw.postDefine('/app/yxq/speech/add', {
                    data: f,
                    success(res) {
                        nav.back()
                        return modal.toast({message: '发布成功'})
                    }
                })

            },

            onLoad() {
                const nav = weex.requireModule('navigator')
                this.param = nav.param()
                var type = this.param.type

                var self = this
                //加载分类
                nw.postDefine('app/yxq/index/classify', {
                    success(res) {
                        var tabs = new Array()


                        for (let i = 0; i < res.length; i++) {
                            var t = res[i]
                            var tab = {
                                name: t.calssifyName,
                                value: t.classifyId
                            }
                            tabs.push(tab)
                        }
                        self.typeData = tabs
                    }
                })

                if (type == 'text') {
                    this.form.contentType = 1200
                } else if (type == 'photo' || type == 'camera') {
                    this.form.contentType = 1300
                }else {
                    this.form.contentType = 1100
                }
            }
        },
        mounted() {

        }
    };
</script>